import styled from "@emotion/styled";
import { ReactNode, memo } from "react";


export const ItemCard = ({ title, icon, value }: { title: string, icon: ReactNode, value: number | string }) => {

    return <ItemCardView>
        <div className="card">
            {icon}
            <p className="dashboard-monitor-base-info-number">{value}</p>
            <p className="dashboard-monitor-base-info-desc"> {title}</p>
        </div>
    </ItemCardView>
}


export default memo(ItemCard);


const ItemCardView = styled.div`
 
    .card {
	    text-align: center;
        background-color:#fff;
        height: 9rem;
        padding-top: 1.4rem;
    }
	.dashboard-monitor-base-info-desc {
		color: #808695;
		font-size: 12px;
        margin: 0;
	}
    .dashboard-monitor-base-info-number {
        font-size: 34px;
        font-weight: 700;
        padding: 12px 0;
        color: #515a6e;
        font-family: 'Times New Roman';
        margin: .4rem 0;
        
    }
`